// 打包 webpack -w
// let HtmlWebpackPlugin = require('html-webpack-plugin') //模板渲染index.html
let miniCssExtractPlugin = require('mini-css-extract-plugin') //拆分css
let optimizeCssAssets = require('optimize-css-assets-webpack-plugin') //拆分css压缩
let path = require('path')
module.exports = {
    entry: "./index.js",
    output: {
        // publicPath: '/'
        filename: "index.js",
        path: __dirname + "/dist",
        // 兼容各种模块的执行函数
        // 输出模块
        libraryTarget: "umd",
        // 默认暴露模块名
        library: "QiaoNan",
        libraryExport: "default"
    },
    resolve: {
        extensions: ['.js']
    },

    // mode: 'production',
    mode: 'development',
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            // miniCssExtractPlugin.loader, 在 style-loader后添加 b不要 style-loader
            use: [miniCssExtractPlugin.loader, 'css-loader']
        },
        // 一定要使用 css-loader style-loader 否则 vue文件使用 样式会报错
        {
            test: /\.scss$/,
            use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [path.resolve(__dirname, "src/assets/css/test.scss")]
                }
            }
            ]
        },
        // 一定要使用 css-loader style-loader 否则 vue文件使用 样式会报错
        {
            test: /\.less$/,
            use: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader', {
                // 配置全局变量 style-resources-loader下面的options为options.patterns
                loader: 'style-resources-loader',
                options: {
                    // style-resources-loader 用patterns表示路径
                    patterns: [path.resolve(__dirname, "src/assets/css/public.less")]
                }
            }]
        },
        // 图片加载机 file-loader url-loader
        {
            test: /\.(jpg|png|jpeg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[contenthash].[ext]', //打包后输出文件名
                        outputPath: 'img',//打包后输出目录
                        esModule: false //关闭es模块语法 解决css背景图片不显示问题
                    }
                }
            ],
            type: 'javascript/auto' //解决css背景图片不显示问题

        },
        // 视频加载
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[contenthash].[ext]',
                        outputPath: 'video',
                    }
                }
            ],
        }
        ]
    },
    // 插件
    plugins: [
        new optimizeCssAssets(),//打包压缩css
        new miniCssExtractPlugin({
            // filename: 'css/[hash].css'
            filename: 'css/style.css'
        }),
    ],
}